import React, { useState, useEffect } from 'react';
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
const antIcon = <LoadingOutlined style={{ fontSize: 30 }} spin />;

function useGetSchoolLogo(School, index) {
  const [loading, setLoading] = useState(true);
  const [imageExists, setImageExists] = useState(false);
  const imageUrl = '/images/UniversityLogo/' + School + '.png';

  useEffect(() => {

    const image = new Image();
    image.src = imageUrl;

    image.onload = () => {
      setImageExists(true);
      setLoading(false);
    };

    image.onerror = () => {
      setImageExists(false);
      setLoading(false);
    };
  }, [imageUrl]);

  return (
    <>
      <div className="items-center hidden sm:flex">
        <div className="flex flex-col items-end">
          <p className="text-base leading-6 text-gray-500">{`${index + 1}`}</p>
        </div>
      </div>
      <div className="h-12 w-12 flex-none rounded-full bg-gray-50 hidden sm:block">
        {(loading || !imageExists) ?
          <Spin indicator={antIcon}></Spin> : <img src={imageUrl} alt="School Logo" />
        }
      </div>
    </>
  );
}

export default useGetSchoolLogo;
